<template>
  <el-row class=" min-h-screen bg-sky-400 ">
    <el-col :lg="16" class="flex items-center justify-center ">
      <div class="text-indigo-50">
        <div class="font-bold text-5xl text-stroke-2">
          欢迎登录智慧爬虫平台
        </div>
        <div class="text-gray-500/50 text-center">
          此平台让你无需编写代码也可以优雅的爬取数据！
        </div>
      </div>
    </el-col>
    <el-col :lg="8" class=" bg-stone-50 flex items-center justify-center flex-col">
      <h2 class="font-bold text-4xl">
        欢迎回来
      </h2>
      <div class="my-12 mt-24">
        <span class=" text-opacity-30 text-gray-500/50">-----------</span>
        <span class="text-gray-500/50" >
        账号密码登录
      </span>
        <span class=" text-opacity-30 text-gray-500/50">-----------</span>
      </div>
      <div class="mb-48">
        <el-form
            class="w-[250px] align-text-top"
            ref="formRef"
            :model="ruleForm"
            :rules="rules"
        >

          <el-form-item prop="userName">
            <el-input v-model="ruleForm.userName" type="text" placeholder="请输入账户名称">
              <template #prefix>
                <el-icon>
                  <User/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input v-model="ruleForm.password" type="password" show-password placeholder="请输入密码">
              <template #prefix>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item  prop="checkCode">
            <el-input  v-model="ruleForm.checkCode" type="text" placeholder="请输入验证码" style="width: 130px;">
              <template #prefix>
                <el-icon>
                  <EditPen />
                </el-icon>
              </template>
            </el-input>
            <img class="rounded-xl px-2" :src="imageData" @click="fetchCheckCode">
          </el-form-item>
          <el-button class="justify-center w-[110px]  " type="primary" @click="submitForm">登录</el-button>
          <el-button class="justify-center w-[110px] " @click="goRegister">注册</el-button>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {EditPen, Lock, User} from "@element-plus/icons-vue";
import { ElNotification } from 'element-plus'
import { useRouter } from "vue-router"
import axios from "axios";
import {doPost} from "~/api/index.js";



const router=useRouter()
const ruleForm = ref({
  userName: '',
  password: '',
  checkCode:'',
})
const rules =({
  userName: [
    {
      required: true,
      message: '请输入账户',
      trigger: 'blur',
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }
  ],
  checkCode: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    }
  ]
})

onMounted(() =>{

  fetchCheckCode();
});

const imageData=ref()

// 在 Vue 组件中的方法中发起请求
function fetchCheckCode() {
  axios.get('/api/user/getCheckCode?'+"type=login", { responseType: 'blob' })
      .then(response => {
        // 将验证码图片流转换为 base64 格式
        const reader = new FileReader();
        reader.onload = () => {
          imageData.value = reader.result; // 将验证码图片流存储在 imageData 变量中
        };
        reader.readAsDataURL(response.data);
      })
      .catch(error => {
        console.error('获取验证码图片失败', error);
      });
}

const formRef=ref(null)
const submitForm = ()=>{
  // noinspection TypeScriptValidateJSTypes
  formRef.value.validate(valid=>{
    if (!valid){
      return false
    }
    doPost("/api/user/login",ruleForm.value,resp=>{

      //登录失败
      if (resp.code === -1){
        fetchCheckCode()
        ElNotification({
          title: 'Error',
          message: resp.msg,
          type: 'error',
          duration:2500
        })
      }else if (resp.code===1){
        router.push("/indexPDF")
        ElNotification({
          title: 'Success',
          message: '登录成功',
          type: 'success',
          duration:2500
        })
      }else {
        ElNotification({
          title: 'Error',
          message: '未知错误',
          type: 'error',
          duration:2500
        })
      }
    })
  });
}
const goRegister = ()=>{
  router.push("/register")
}

</script>

<style scoped>

</style>